<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="style.css" />
	</head>
	<body>
		<div id="app">
			<div v-if="books.length">

				<table border="" cellspacing="" cellpadding="">
					<thead>
						<tr>
							<th></th>
							<th>书籍名称</th>
							<th>出版日期</th>
							<th>价格</th>
							<th>购买数量</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="(item,index) in books">
							<td>{{item.id}}</td>
							<td>{{item.name}}</td>
							<td>{{item.date}}</td>
							<td>{{item.price|showPrice}}</td>
							<td>
								<button type="button" @click="decrement(index)" :disabled="item.count<=1">-</button>
								{{item.count}}
								<button type="button" @click="increment(index)">+</button>
							</td>
							<td><button type="button" @click="removeHandle(index)">移除</button></td>
						</tr>
					</tbody>
				</table>
				<h2>总价格:{{totalPrice|showPrice}}</h2>
			</div>
			<h2 v-else>购物车为空</h2>
		</div>
		<script src="../js/vue.js"></script>

		<script src="main.js"></script>
	</body>
</html>
